<template>
  <div class="box">
    <div class="top">
        <div class="text" @click="fun2"><van-icon name="arrow-left" /></div>
        <div class="text">商品</div>
        <div class="text">详情</div>
        <div class="text">规格</div>
        <div class="text">评论</div>
    </div>
    <img :src="data.myimg" alt="">
    <div class="fenqi">
        <p>花呗分期免息</p>
    </div>

    <div class="center">
        <div class="top">
            <span>￥{{ data.moeny }}</span>
            <del>￥{{ data.before }}</del>
        </div>
        <div class="zhong">
            <p>{{ data.introduce }}</p>
            <h6>140W满功耗RTX3060，双显三模，144Hz高色域电竞屏，享一年意外险！咨询客服有惊喜！</h6>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>

    <div class="bottom">
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star" text="已收藏" :color="color[index]" @click="fun" />
            <van-goods-action-button type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" @click="f1()" />
        </van-goods-action>
    </div>
    
  </div>
</template>

<script>
export default {
    data() {
        return {
            color: ["#ff5000", "#999"],
            index: 1,
            x: 0,
            data: {},
            name: ["qinbo", "tianxuan","home"],
            y: 5,
            time:null
            
        }
    },
    methods: {
        fun2() {
            this.$router.push({
                name:this.name[this.y]
            }).catch(err=>err)
           
        },
        fun() {
           this.x++
            if (this.x % 2 == 1) {
                this.index=0
            } else {
                this.index=1
            }
        },
        f1() {
            this.$http({
                url: "http://localhost:3000/mycar",
                method: "post",
                data: {
                    urname: this.data.urname,
                    myimg: this.data.myimg,
                    text: this.data.introduce,
                    money:this.data.moeny
                }
            }).then(res => {
                // console.log(res);
                this.$router.push("/mycar")
            })
        }
    },
    mounted() {
    //    this.time= setInterval( ()=>{
            this.data = this.$route.query.data1
            this.y = this.$route.query.id
        console.log(this.data);
    //     console.log(this.y);
    //     },200)
       
    },
    watch: {
       '$route': function() {
            this.data = this.$route.query.data1
            this.y = this.$route.query.id
        }
    }
    
}
</script>

<style lang="scss" scoped>
.box{
    .center{
        width: 95vw;
        margin:3vw  auto;
        .zhong{
            text-indent: 4vw;
            color: #666;
            font-size: 4.5vw;
            line-height: 7vw;
            h6{
                margin-top: -3vw;
            }
        }
        .top{
            span{
                color: red;
                font-size: 7vw;
            }
            del{
                font-size:4vw;
                margin-top: 3vw;
                text-indent: 4vw;
                color: #999;
            }
        }
    }
    .fenqi{
        height: 10vw;
        background-color:   #f5f5f5;
        width: 95vw;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        p{
            color: red;
            height: 6vw;
            width: 30vw;
            border: 1px solid red;
            border-radius: 1vw;
            
        }
    }
    .top{
        display: flex;
        .text{
            width: 20vw;
            height: 13vw;
            text-align: center;
            line-height: 13vw;
            font-size: 5vw;
        }
        
    }
    img{
            width: 98vw;
            padding: 0 1vw;
        }

}
</style>